<template>
	<yb-modal
	v-if="form && form.length > 0"
	custom-class="yb-dialog"
	ref="modal"
	:title="title"
	:content="content"
	:options="options"
	:confirm="confirmArea"
	:cancel="cancel"
	:visible="modalVisible"
	@confirm="modalConfirm"
	@cancel="modalCancel"
	@hide="modalHide">
		<yb-validate
		ref="validate"
		:value="item.value"
		:required="item.required"
		:test="item.test"
		:error="item.error"
		:empty="item.empty"
		custom-style="padding-top: 10rpx;padding-right:20rpx;padding-bottom: 10rpx;padding-left: 20rpx;"
		v-for="(item, index) in form" :key="index">
			<view class="yb-flex yb-dialog-label">
				<yb-text :size="28" :color="item.color" :value="item.label" :lines="1" v-if="item.label"></yb-text>
			</view>
			<template v-if="item.type == 'textarea'">
			</template>
			<template v-else-if="item.type == 'radio'">
				<yb-radio-group
				:custom-style="{
					'margin-bottom': '20rpx'
				}"
				:custom-class="{
					'yb-row': item.row,
					'yb-wrap': item.wrap
				}"
				v-model="item.value"
				:disabled="item.disabled">
					<yb-radio
					:custom-style="{
						'margin-right': item.row && i < item.radios.length - 1 ? '20rpx' : '',
						'margin-bottom': item.wrap ? '20rpx' : ''
					}"
					v-for="(radio, i) in item.radios"
					:key="i"
					:value="radio.value"
					:disabled="radio.disabled"
					:label="radio.label"
					:options="radio.options"></yb-radio>
				</yb-radio-group>
			</template>
			<template v-else-if="item.type == 'checkbox'">
				<yb-checkbox-group
				:custom-style="{
					'margin-bottom': '20rpx'
				}"
				v-model="item.value"
				:disabled="item.disabled"
				:custom-class="{
					'yb-row': item.row,
					'yb-wrap': item.wrap
				}">
					<yb-checkbox
					:custom-style="{
						'margin-right': item.row && i < item.checkboxs.length - 1 ? '20rpx' : '',
						'margin-bottom': item.wrap ? '20rpx' : ''
					}"
					v-for="(checkbox, i) in item.checkboxs"
					:key="i"
					:value="checkbox.value"
					:disabled="checkbox.disabled"
					:label="checkbox.label"
					:options="checkbox.options"></yb-checkbox>
				</yb-checkbox-group>
			</template>
			<template v-else>
				<yb-input
				:custom-style="{
					height: Util.pixelunit(item.height)
				}"
				:placeholder="item.placeholder"
				:maxLength="item.maxLength"
				:disabled="item.disabled"
				:options="item.options"
				:type="item.type"
				:outline="item.outline"
				v-model="item.value"></yb-input>
				<yb-gap v-if="index < form.length - 1"></yb-gap>
			</template>
		</yb-validate>
	</yb-modal>
	<yb-modal
	v-else
	custom-class="yb-dialog"
	ref="modal"
	:title="title"
	:content="content"
	:options="options"
	:confirm="confirmArea"
	:cancel="cancel"
	:visible="modalVisible"
	@confirm="modalConfirm"
	@cancel="modalCancel"
	@hide="modalHide">
	</yb-modal>
</template>

<script>
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	import Util from '../../js_sdk/util.js'
	export default {
		mixins: [ComponentMixin],
		data () {
			return {
				title: '',
				content: '',
				options: {},
				confirmArea: '',
				cancel: '',
				form: [],
				modalVisible: false,
				async: false,
				success: null,
				fail: null,
			}
		},
		computed: {
			Util () {
				return Util
			}
		},
		methods: {
			//确认框
			confirm ({title, content, async, options, confirm, cancel, success, fail}) {
				this.reset()
				this.title = title || ''
				this.content = content || ''
				this.async = async || false
				this.options = options || {},
				this.confirmArea = confirm || '确定'
				this.cancel = cancel || '取消'
				this.success = success || null
				this.fail = fail || null
				this.modalVisible = true
				// #ifdef MP
				this.$nextTick(function () {
					this.$forceUpdate()
				})
				// #endif
			},
			//通知框
			alert ({title, content, async, options, confirm, success, fail}) {
				this.reset()
				this.title = title || '',
				this.content = content || '',
				this.async = async || false
				this.options = options || {},
				this.confirmArea = confirm || '确定'
				this.cancel = false,
				this.success = success || null
				this.fail = fail || null
				this.modalVisible = true
				// #ifdef MP
				this.$nextTick(function () {
					this.$forceUpdate()
				})
				// #endif
			},
			//带表单的弹框
			prompt ({title, form, label, placeholder, required, error, empty, test, value, type, async, options, confirm, cancel, success, fail}) {
				this.reset()
				this.title = title || ''
				this.form = this.genarateForm(form && form.length > 0 ? form : [
					{
						label: label || '',
						placeholder: placeholder || '',
						value: value || '',
						type: type || 'text',
						required: required || false,
						test: test || '',
						error: error || {},
						empty: empty || {},
						options: options || {}
					}
				])
				this.async = async || false
				this.options = options || {}
				this.confirmArea = confirm || '确定'
				this.cancel = cancel || '取消'
				this.success = success || null
				this.fail = fail || null
				this.modalVisible = true
				// #ifdef MP
				this.$nextTick(function () {
					this.$forceUpdate()
				})
				// #endif
			},
			genarateForm (form) {
				return form.map(item => {
					return Object.assign({}, {
						value: '',
						label: '',
						color: '#333',
						placeholder: '',
						outline: false,
						options: item.type == 'checkbox' ? { shape: 'square' } : {},
						type: 'text',
						required: false,
						test: '',
						error: {},
						empty: {},
						height: '70rpx'
					}, item)
				})
			},
			modalConfirm () {
				if ( this.form && this.form.length > 0 ) {
					let bol = this.form.every((item, key) => {
						return this.$refs.validate[key].validate()
					})
					if ( bol ) {
						if ( this.async ) {
							this.$refs.modal.showLoading()
						} else {
							this.modalVisible = false
						}
						this.success ? this.success({
							confirm: true,
							form: this.form.map(item => {
								return {
									label: item.label || '',
									value: item.value,
									type: item.type
								}
							})
						}) : null
					}
				} else {
					if ( this.async ) {
						this.$refs.modal.showLoading()
					} else {
						this.modalVisible = false
					}
					this.success ? this.success({
						confirm: true
					}) : null
				}
			},
			modalCancel () {
				this.modalVisible = false
				this.success ? this.success({
					confirm: false
				}) : null
			},
			modalHide () {
				this.modalVisible = false
				this.fail ? this.fail() : null
			},
			hide () {
				this.modalVisible = false
			},
			reset () {
				this.title = ''
				this.content = ''
				this.options = {}
				this.confirmArea = ''
				this.cancel = ''
				this.form = []
			}
		}
	}
</script>

<style scoped>
	.yb-dialog-label {
		margin-bottom: 20rpx;
	}
</style>